<template>
    <div>
        <h2>登录表单</h2>
        <form @submit.prevent="handleLogin">
            <input type="text" v-model="loginForm.username" placeholder="请输入用户名" required>
            <input type="password" v-model="loginForm.password" placeholder="请输入密码" required>
            <button type="submit">登录</button>
        </form>
        <p v-if="user.islogin">欢迎，{{ user.username }}</p>
        <button @click="logout">登出</button>

        <p>鼠标的坐标：{{ x }}，{{ y }}</p>
    </div>
</template>


<script setup>
import { ref } from 'vue';
import { useAuth } from './utils/useAuth.js';
import {useMouse} from './utils/useMouse.js'
// 使用useAuth组合函数
const {user,login,logout}=useAuth()0

const {x,y}=useMouse()

// 定义表单
const loginForm=ref({
    username:'',
    password:''
})

// 登录逻辑
const handleLogin=()=>{
    if(loginForm.value.password ==='123'){
        login('val-token',loginForm.value.username)
    }else{
        alert('密码错误')
    }
}

</script>



<style scoped></style>